<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>

    <el-menu-item index="1">早饭</el-menu-item>

    <el-submenu index="2">
      <template slot="title">午饭</template>
      <el-menu-item index="2-1">包子</el-menu-item>
      <el-menu-item index="2-2">饺子</el-menu-item>
    </el-submenu>

    <el-submenu index="33">
      <template slot="title">下午茶</template>

      <el-submenu index="33-1">
        <template slot="title">奶茶</template>
        <el-menu-item index="33-1-1">原味奶茶</el-menu-item>
        <el-menu-item index="33-1-2">珍珠奶茶</el-menu-item>
      </el-submenu>
    </el-submenu>

    <el-menu-item index="3">晚饭</el-menu-item>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'LayoutIndex'
}
</script>

<style lang="scss">
el-aside {
  width: 200px;
  height: 100px;
  line-height: 260px;
  background-color: red;
}
el-heade {
  background-color: green;
  height: 50px;
}
el-main {
  background-color: skyblue;
}
</style>
